<template>
	<div id="auto">
		<div>
			和流式布局很像，不过内容较短时，页脚能保证在底部<button @click="count=count===100?10:100">切换</button>
		</div>
		<div>值得注意的是，需要修改样式中的min-height为calc(100vh - 页头高度 - 页脚高度)</div>
		<div class="" v-for="i in count">
			{{i}}
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				count: 10
			}
		},
		created() {

		},
		mounted() {

		},
		methods: {

		},
		computed: {

		},
		filters: {

		},
		beforeCreate() {
			//启用App.vue滚动条
			document.documentElement.setAttribute('auto-stream', '')
			this.$store.commit('set_needAppScrollbar', true)
		},
		beforeUnmount() {
			//关闭App.vue滚动条
			document.documentElement.removeAttribute('auto-stream')
			this.$store.commit('set_needAppScrollbar', false)
		}
	}
</script>

<style lang="scss">
	#auto {
		//使用这种布局时，就算设置height:100%,实际高度也没有父容器那么高，因为父容器设的是min-height
		//所以这里如果需要保证和父容器一样高，需要设置和父容器一样的min-height
		min-height: calc(100vh - 60px - 120px);
	}
	html[auto-stream]{
		#container{
			//100vh表示整个屏幕高度,1vh表示1%的屏幕高度
			//减去页头高度、页脚高度
			min-height: calc(100vh - 60px - 120px);
		}
	}
</style>
